﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<span ng-controller="HomeController">
    <Style>
        html, body, #MapCanvas {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #MapCanvas {
            position: absolute;
        }

        #menuContainer {
            width: 220px;
            position: absolute;
            z-index: 1;
            background-color: white;
            top: 25%;
            left: 8%;
        }

        .mainMenuOption {
            display: inline-block;
            width: 50px;
            padding: 10px;
            background-color: gray;
            cursor: pointer;
        }

        .selectedMenu{
            background-color:yellow;
            color:blue;
        }
    </Style>

    
    <div id="menuContainer">
        <div>
            <span class="mainMenuOption" ng-class="{selectedMenu: menu === selectedMenu }" ng-repeat="menu in menuItems" ng-click="selectMenu(menu)">{{menu.Name}}</span>
        </div>

        <span ng-show="selectedMenu.ShowRouting">
            <mapaddress data-map-address-id="fromAddress" data-lat="32.016106" data-lng="34.773102" placeholder="מאיפה" style="width:200px"></mapaddress>
            <input readonly value="המכון הטכנולוגי חולון" type="text"  style="width:200px" />
            אמצעי:
            <select ng-options="item.type as item.name for item in routingOptions" ng-model="trafficType"></select>
            <br/>
            זמן משוער:
            <span>{{directionTiming}}</span>
        </span>


        <div data-angular-treeview="true"
             data-tree-id="menuTree"
             data-tree-model="selectedMenu.Children"
             data-node-id="ID"
             data-node-label="Name"
             data-node-children="Children"
             data-showcheckbox="true">
        </div>
    </div>

    <map zoom="{{zoom}}" center="[{{center.Lat}},{{center.Lng}}]" id="MapCanvas">
        <marker position="[{{Hit.Lat}},{{Hit.Lng}}]" class="ng-scope" on-click="setSelectedNode(Hit)"></marker>
        <span ng-repeat="node in menuTree.multipleSelection">
            <marker ng-repeat="lct in node.Locations" icon="~/Images/Google%20Maps%20Markers/{{node.PictureName}}.png" position="{{lct.LatLng}}" class="ng-scope" on-click="setSelectedNode(lct)"></marker>
        </span>
        <overlay-map-type object="{{imageMapType}}" init-method="push">
        </overlay-map-type>
        <info-window id="infowindow" position="[{{SelectedNode.Lat}},{{SelectedNode.Lng}}]" visible="true">
            <div style="width: 200px; height: 100px;">
                <img ng-src="/Images/Uploaded/{{SelectedNode.Details.Image}}" ng-show="SelectedNode.Details.Image.length > 0" style="width: 60px;" />
                <br />
                <b>{{ SelectedNode.Details.Title }}</b>
                <br />
                {{ SelectedNode.Details.Content }}
                <br />
                <a target="_blank" href="{{ SelectedNode.Details.Url }}" ng-show="SelectedNode.Details.Url.length > 0">קישור</a>
            </div>
        </info-window>
    </map>


</span>


@section Scripts {
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
}
